<script setup lang="ts">
const { data } = defineProps(['data'])
</script>
<template>
  <div class="container-core spu-head-container">
    <div class="head-main-container">
      <div class="head-badge">{{ data.badge }}</div>
      <div class="head-title">{{ data.title }}</div>
      <div class="head-lines-container">
        <div class="head-line" v-for="item,index in data.lines" :key="`head-line-${index}-${item}`">{{ item }}</div>
      </div>
    </div>
    <div class="head-related-container">
      <div class="head-buttons-container">
        <div class="head-button" v-for="item,index in data.buttons" :key="`head-button-${index}-${item.name}`">
          <ap-button size="small">{{ item.name }}<ap-icon v-if="item.icon" :name="item.icon" style="margin-left: 10px" :size="14" /></ap-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.spu-head-container {
  .head-main-container {
    .head-title {
      font-weight: bold;
    }
    .head-lines-container {
      .head-line {
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
  .head-related-container {
    .head-buttons-container {
      .head-button {
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
// Mobile
@media screen and (max-width: 767px) {
  .spu-head-container {
    .head-main-container {
      .head-badge {
        font-size: 14px;
      }
      .head-title {
        font-size: 32px;
      }
      .head-lines-container {
        margin-top: 10px;
        .head-line {
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
    .head-related-container {
      margin-top: 30px;
      .head-buttons-container {
        .head-button {
          margin-top: 5px;
        }
      }
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .spu-head-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    .head-main-container {
      .head-badge {
        font-size: 14px;
      }
      .head-title {
        font-size: 32px;
      }
      .head-lines-container {
        margin-top: 10px;
        .head-line {
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
    .head-related-container {
      .head-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .head-button {
          margin-top: 5px;
        }
      }
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .spu-head-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    .head-main-container {
      .head-badge {
        font-size: 14Px;
      }
      .head-title {
        font-size: 32Px;
      }
      .head-lines-container {
        margin-top: 10Px;
        .head-line {
          font-size: 14Px;
          margin-top: 5Px;
        }
      }
    }
    .head-related-container {
      .head-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .head-button {
          margin-top: 5Px;
        }
      }
    }
  }
}
</style>